<template>
  <div class="note">
    <div class="note-header" ref="container">
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <h5>手记详情</h5>
      <i class="iconfont icon-fenxiang"></i>
    </div>
    <div class="main">
      <div class="user-list">
        <div class="user-content">
          <div class="user-img">
            <img
              :src="
                noteUser
                  ? noteUser.user.avatar +
                    '?x-oss-process=image/resize,m_mfit,h_405,w_720'
                  : ''
              "
            />
          </div>
          <div class="user-name">
            <h6>{{ noteUser ? noteUser.user.username : "" }}</h6>
            <p>
              <span>发布于</span>
              <span>{{noteUser? formatDate(noteUser.user.addtime):'' }}/</span>
              <span>{{noteUser? timestampToTime(noteUser.user.addtime):'' }}</span>
            </p>
          </div>
        </div>
        <div class="attention"><span>+</span>关注</div>
      </div>
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(image,index) in images" :key="index"><img :src="image+'?x-oss-process=image/resize,m_mfit,h_405,w_720'" alt=""></van-swipe-item>
    
      </van-swipe>
    </div>
    <div class="note-context">
        <h5>{{noteUser?noteUser.title:''}}</h5>
        <p>{{noteUser?noteUser.content:''}}</p>
    </div>
    <div class="text-list" v-if="contentList!=0">
        <div class="comment"><span>{{contentList?contentList.length:''}}</span>评论</div>
        <ul>
            <li v-for="text in contentList" :key="text.id">
                <img :src="text.userDetail.avatar_small" alt="">
                <div class="write-comment">
                   <div class="write-text">
                       <h5>{{text.userDetail.nickname}}</h5>
                       <p>{{text.contentText}}</p>
                   </div>
                    <div class="text-time">
                        <div class="time">
                            <span>{{formatDate(text.createTimeUnix)}}</span>-
                            <span>{{timestampToTime(text.createTimeUnix)}}</span>
                        </div>
                        <i class="iconfont icon-dianzan"></i>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="text-lists" v-else>
        暂无评论
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      noteUser: null,
      images: null,
      contentList:null
    };
  },
  methods: {
    formatDate(addTime) {
      var year = new Date(addTime ).getFullYear();
      var month = new Date(addTime ).getMonth() + 1;
      var date = new Date(addTime ).getDate();
      // if (month > 9) {
      //   return 0 + month;
      // }
      // if (date > 9) {
      //   return 0 + date;
      // }
      //  var hour=new Date(addTime*1000).getHours();
      //  var minute=new Date(addTime*1000).getMinutes();
      //  var second=new Date(addTime*1000).getSeconds();
      return year + "/" + month + "/" + date;
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp ); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var Y = date.getFullYear() + '-';
      // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      // var D = date.getDate() + ' ';
      var h = date.getHours() + ":";
      var m = date.getMinutes() + "";
      // var s = date.getSeconds();
      if(h<10 && m<10){
        //    return  "0"+h +"0"+ m;
            return h+m;
      }
      else{
        //   return h+m;
          return  "0"+h +"0"+ m;
      }
     
    },
  },

  created: function () {
    this.axios
      .get("https://apis.netstart.cn/xpc/note/" + this.$route.query.id)
      .then((res) => {
        console.log(res.data.data);
        this.noteUser = res.data.data;
        this.images = res.data.data.images;
      });
    
       this.axios
      .get("https://apis.netstart.cn/xpc/note/" + this.$route.query.id+"/comment?offset=0&limit_size=10")
      .then((res) => {
        console.log(res.data.data);
       this.contentList=res.data.data
      });
  },
};
</script>

<style lang="less" scoped>
.note {
  position: relative;
  background: whitesmoke;
  .note-header {
  
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    width: 100%;
    align-items: center;
    background: white;
    box-shadow: 0 1px 0 rgba(192, 183, 183, 0.356);

    h5 {
      flex: 1;
      margin: 0;
      text-align: center;
      font-weight: 800;
      font-size: 16px;
    }
    i {
      font-size: 24px;
      font-weight: 600;
      margin: 10px;
    }
  }
  .main {
    padding-top: 40px;
    background: white;
    .user-list {
      margin:  10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-content {
        display: flex;
        justify-items: center;
        .user-img {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
        }
        .user-name {
          h6 {
            margin: 2px;
            font-size: 15px;
            font-weight: 400;
          }
          p {
            margin: 0 4px;
            span {
              color: #999;
              font-size: 12px;
              margin-right: 4px;
            }
          }
        }
      }

      .attention {
        border: 1px solid red;
        border-radius: 14px;
        width: 60px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        color: red;
        padding: 2px 4px;
        font-size: 14px;
        span {
          margin-right: 2px;
          font-size: 16px;
          line-height: 26px;
          font-weight: 600;
        }
      }
    }
  }
  .banner {
        background: white;
   
      .my-swipe{
          height: 100%;
      }
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
    //   line-height: 150px;
      text-align: center;
  
  
      img{
          width: 100%;
          display: block;
    
      }
    }
  }
  .note-context{
      padding:0 0 10px 0;
      background: white;
      h5{
          margin: 0px 10px;
          font-size: 18px;
      }
      p{
          margin: 0 10px;
          font-size: 14px;
      }
  }
  .text-list{
      margin: 6px 0;
      .comment{
          background: white;
        padding: 6px;
        font-weight: 600;
        span{
            margin-right: 4px;
        }
      }
      ul{
          background: white;
          padding: 10px;
          li{
              display: flex;
              align-items: center;
              margin: 10px 0;
              img{
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
              }
              .write-comment{
                  display: flex;
                  flex-wrap: wrap;
                  margin-left: 10px;
                  .write-text{
                      width: 100%;
                      h5{
                          margin: 4px 0;
                      }
                      p{
                          margin: 4px 0;
                          font-size: 14px;
                      }
                  }
                  .text-time{
                      width: 100%;
                      display: flex;
                      justify-content: space-between;
                      span{
                          font-size: 12px;
                          color: #999;
                      }
                  }
              }
          }
      }
  }
  .text-lists{
      background: white;
      height: 30px;
      line-height: 30px;
      width: 100%;
      text-align: center;
  }
}
</style>